<template>
	<view class="">
		<view class="back" @click="backs" style="margin-top: 20px;">
			<image class="back_img"  src="../../../static/img/backs.png" mode=""></image>
		</view>
		<view class="bgfff">
			<view class="w100">
				<view class="w100">
					<view class="w100 headImage porel" >
						<view class="flexenters poritem">
							<view class="w5 bgfff"></view>
							<view class="colorfff">
								<picker mode="date" :value="date" :start="startDate" :end="endDate" fields="month" @change="bindDateChange">
									<view class="uni-input">{{date}}</view>
								</picker>
							</view>
							<view class="w5 bgfff"></view>
						</view>
						<image  class="posabs_img" src="../../../static/img/pai.png" mode=""></image>
						<view class="w100 posacen">
							<view class="bgfff w25 h160 disfcol bor_raone posrel">
								<image v-if="lists_two.avatar" class="w40" :src="lists_two.avatar" mode=""></image>
								<image v-else class="w40" src="../../../static/img/detailsMsg/photo.png" mode=""></image>
								<view class="co34363Ds">{{lists_two.userName}}</view>
								<view class="flexCenter">
									<image class="w11" src="../../../static/img/integral.png" mode=""></image>
									<view class="coFF9900">{{lists_two.ownScore}}</view>
								</view>
								<view class="co989BA6s">{{lists_two_roles}}</view>
								<image class="right0 posw8" src="../../../static/img/Leftshadow.png" mode=""></image>
								<image class="posw40" src="../../../static/img/second.png" mode=""></image>
							</view>
							<view class="bgfff w35 h200 disfcol bor_ratwo posrel">
								<image v-if="lists_one.avatar" class="w40" :src="lists_one.avatar" mode=""></image>
								<image v-else class="w40" src="../../../static/img/detailsMsg/photo.png" mode=""></image>
								<view class="co34363Ds">{{lists_one.userName}}</view>
								<view class="flexCenter">
									<image class="w11" src="../../../static/img/integral.png" mode=""></image>
									<view class="coFF9900">{{lists_one.ownScore}}</view>
								</view>
								<view class="co989BA6s">{{lists_one_roles}}</view>
								<image class="posw40" src="../../../static/img/first.png" mode=""></image>
							</view>
							<view class="bgfff w25 h160 disfcol bor_rathree posrel">
								<image v-if="lists_three.avatar" class="w40" :src="lists_three.avatar" mode=""></image>
								<image v-else class="w40" src="../../../static/img/detailsMsg/photo.png" mode=""></image>
								<view class="co34363Ds">{{lists_three.userName}}</view>
								<view class="flexCenter">
									<image class="w11" src="../../../static/img/integral.png" mode=""></image>
									<view class="coFF9900">{{lists_three.ownScore}}</view>
								</view>
								<view class="co989BA6s">{{lists_three_roles}}</view>
								<image class="left0 posw8" src="../../../static/img/Rightshadow.png" mode=""></image>
								<image class="posw40"  src="../../../static/img/third.png" mode=""></image>
							</view>
						</view>
					</view>
				</view>
				<view class="w100 boxs" >
					<view class="w100 flexenters p19 bor_bottom" v-for="(item,index) in lists" :key="index" v-if="index > 2">
						<view class="flexCenter">
							<view class="">{{index + 1}}</view>  
							<view class="flexCenter ml20s">
								<view class="">
									<image v-if="item.avatar" class="w40" :src="item.avatar" mode=""></image>
									<image v-else class="w40" src="../../../static/img/detailsMsg/photo.png" mode=""></image>
								</view>
								<view class="ml20">
									<view class="co34363D">{{item.userName}}</view>
									<view class="co989BA6" v-if="item.roles.length > 0">{{item.roles[0].roleName}}</view>
								</view>
							</view>
						</view>
						<view class="flexCenter">
							<image class="w11" src="../../../static/img/integral.png" mode=""></image>
							<view class="coFF9900">{{item.ownScore}}</view>
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import home from "@/serve/api/home.js"
	export default {
		data(){
			const currentDate = this.getDate({
				format: true
			})
			return {
				date: currentDate,
				lists:[],
				lists_one:'',
				lists_two:'',
				lists_three:'',
				lists_one_roles:'',
				lists_two_roles:'',
				lists_three_roles:'',
			}
		},
		onLoad() {
		  this.rankings()
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods:{
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				return `${year}-${month}`;
			},
			bindDateChange: function(e) {
				this.date = e.target.value
				this.lists = []
				this.rankings()
			},
			async rankings(){
				let parme = {
					pageNum:'',
					pageSize:'',
					yearMonth: this.date, 
				}
				const res = await home.rankUserListByScore(parme)
				
				this.lists_one = res.data.data.list[0]
				if(res.data.data.list[0].roles.length > 0){
					this.lists_one_roles = res.data.data.list[0].roles[0].roleName
				}
				if(res.data.data.list[1].roles.length > 0){
					this.lists_two_roles = res.data.data.list[1].roles[0].roleName
				}
				if(res.data.data.list[2].roles.length > 0){
					this.lists_three_roles = res.data.data.list[2].roles[0].roleName
				}
				this.lists_two = res.data.data.list[1]
				this.lists_three = res.data.data.list[2]
				this.lists = res.data.data.list
			},
			backs(){
				uni.navigateBack({})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.selectIcon{
		width: 20rpx;
		height: 20rpx;
	}
	.boxs{
		padding: 20px;
		box-sizing: border-box;
	}
	.co34363D{
		color: #34363D;
		font-size: 16px;
	}
	.co989BA6{
		color: #989BA6;
		font-size: 12px;
		margin-top: 5px;
	}
	.p19{
		padding: 19px 0;
	}
	.bor_bottom{
		border-bottom: 1px solid #F2F4F8;
	}
	.headImage{
		background: url(../../../static/img/bgs.png) no-repeat 0px 0px;
		background-size: 100% 100%;
		width: 100%;
		height: 530px;
		// background-size: cover;
		// background-attachment: fixed;
	}
	.w35{
		width: 32%;
	}
	.w25{
		width: 29%;
	}
	.h160{
		height: 180px;
	}
	.h200{
		height: 200px;
	}
	.disfcol{
		display: flex;align-items: center;justify-content: center;flex-direction: column;
	}
	.w40{
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}
	.w11{
		width: 11px;height: 12px;
	}
	.co34363Ds{
		color: #34363D;
		font-weight: bold;
		font-family: PingFang SC;
		font-size: 16px;
	}
	.coFF9900{
		color: #FF9900;
		font-size: 14px;
		font-weight: bold;
		margin-left: 5px;
	}
	.co989BA6s{
		color: #989BA6;
		font-size: 14px;
	}
	.bor_raone{
		border-radius: 4px 4px 0 4px;
	}
	.bor_ratwo{
		border-radius: 4px 4px 0 0;
	}
	.posrel{
		position: relative;
	}
	.bor_rathree{
		border-radius: 4px 4px 4px 0;
	}
	.posw8{
		position: absolute;top: 0;width: 8px;height: 79px;
	}
	.right0{
		right: 0;
	}
	.left0{
		left: 0;
	}
	.back{
		height: 44px;display: flex;align-items: center;position: fixed;top: 0;left: 0;z-index: 9999;
	}
	.back_img{
		width: 23px;height: 23px;line-height: 44px;padding-left: 10px;
	}
	.porel{
		position: relative;
	}
	.poritem{
		position: absolute;z-index: 999;left: 50%;transform: translate(-50%, -50%);top: 21%;width: 125px;background-color: #0051A5;padding: 3px 10px;box-sizing: border-box;border-radius: 15px;
	}
	.w5{
		width: 5px;
		height: 5px;
	}
	.posabs_img{
		width: 280px;height: 220px;position: absolute;top: 32%;left: 50%;transform: translate(-50%, -50%);
	}
	.posacen{
		position: absolute;bottom: 12px;display: flex;align-items: flex-end;justify-content: center;
	}
	.posw40{
		position: absolute;top: -17px;width: 40px;height: 40px;
	}
	.ml20s{
		margin-left: 20px;
	}
	
	
	
</style>

